import React, { useState, useEffect, useMemo } from 'react'
import getHome from '../views/api/home'
import { IGoods } from '../interface'
import { TruckOutline } from 'antd-mobile-icons'
import { Button } from 'antd-mobile'
import API from '../views/api/shopCar'
import { store } from '../store'
import { Toast } from 'antd-mobile'
import { NavLink} from 'react-router-dom'


export default function Suggest() {
    const [sug, setSug] = useState([])
    const { token, _id } = store.getState().userReducer.user
    const isLogin = useMemo(() => token, [token])
    const getGoods = async () => {
        let res = await getHome["getHome"]()
        // console.log(res, 'res')
        setSug(res.data.data)
    }
    useEffect(() => {
        getGoods()
    }, [])

    const shopCarAdd = async (item: IGoods) => {
        let res = await API['shopCarAdd']({ ...item, token, user_id: _id })
        console.log(res, '加入购物车')
        Toast.show({
            content: '已加入购物车',
            position: 'top'
        })
    }
    return (
        <>
            {
                isLogin && sug.filter((item: IGoods) => item.recommend).map((ele: IGoods) => <div
                    key={ele._id}
                    id={ele._id}>
                    <NavLink to={'/topic/' + ele._id}><img src={ele.img} alt="" />
                    <h4>{ele.goods_name}</h4>
                    <p>{`${ele.price} / ${ele.weight} 磅`}</p></NavLink>
                    <div className='button' onClick={() => shopCarAdd(ele)}>
                        <i><TruckOutline /></i>
                    </div>
                </div>)
            }
        </>
    )
}
